<template>
  <div class="fd-main-box">
    <div class="fd-title-box">
      <i class="fd-title-logo"></i>
      <p class="fd-title-text">叮~大雪 API</p>
      <p class="fd-info-text">提供API接口分类，涵盖生活服务API、金融科技API、企业工商API、等相关的API接口服务。<br />免费API接口可安全、合规地连接上下游，为数据API应用能力赋能。
      </p>
    </div>
    <div class="fd-width-100 fd-height-100">
      <div class="fd-middle-content">
        <ul class="fd-api-list">
          <li class="fd-api-item" v-for="(api, index) in apiList" :key="index + 'api'">
            <div class="fd-api-box">
              <a class="fd-icon-box" :title="api.name" :href="'/apiDetail/id/' + api.id">
                <i :class="['fd-api-icon', 'api' + index]"></i>
                <h2>{{ api.name }}</h2>
              </a>
              <p class="fd-api-price">免费</p>
              <p class="fd-api-info">{{ api.info }}</p>

            </div>
            <el-button class="fd-api-btn">了解详情</el-button>
          </li>
        </ul>
      </div>
    </div>
  </div>
</template>
<script>
export default {
  name: "interfaceToll",
  data() {
    return {
      apiList: [
        {
          name: "天气预报",
          info: "查询天气情况：温度、湿度、AQI、天气、风向等",
          id: 1
        }, {
          name: "手机号码归属地",
          info: "根据手机号码或手机号码的前7位，查询手机号码归属地信息，如省份 、城市、运营商等。",
          id: 2
        }, {
          name: "星座运势",
          info: "十二星座每日、每月、每年运势",
          id: 3
        }, {
          name: "性格测试",
          info: "根据用户填写的心理测试题，经过MBTI理论和指标模型的分析，最终得到人格测试报告。测得的结果仅供参考娱乐。",
          id: 4
        }, {
          name: "IP地址",
          info: "根据查询的IP地址，查询该IP所属的区域",
          id: 5
        }, {
          name: "新闻头条",
          info: "最新新闻头条，各类国内、国际、体育、娱乐、科技等资讯，更新周期5-30分钟",
          id: 6
        }, {
          name: "身份证查询",
          info: "身份证归属地信息查询",
          id: 7
        }, {
          name: "历史上的今天",
          info: "历史上的指定日期发生的大事，包括重大事情、诞辰、逝世等图文详情，不断增加中。",
          id: 8
        }, {
          name: "汇率",
          info: "外汇报价，货币汇率",
          id: 9
        }, {
          name: "万年历",
          info: "指定日期查询当日的星期、星座、农历、生肖、天干地支、岁次、黄历相关的福神、喜神、宜忌等信息，可以进行阴阳历转换。",
          id: 10
        }, {
          name: "股票数据",
          info: "提供沪深、香港、美国股市信息，数据来源网络，仅供参考；不支持对外展示，只支持自用学习研究。",
          id: 11
        }, {
          name: "热门视频榜单",
          info: "抖音热门视频榜及搞笑、体育、汽车、美食达人视频榜单。视频播放链接暂只支持手机端浏览器打开访问",
          id: 12
        }, {
          name: "2022出行防疫政策指南",
          info: "2022年各地出行防疫政策查询。查询全国高中低风险地区。",
          id: 13
        }, {
          name: "数独游戏生成器",
          info: "数独生成器，一款数独谜题和答案在线生成API。 4个难度级别，无限量随机数独谜题生成",
          id: 14
        }, {
          name: "笑话大全",
          info: "搜集网络幽默、搞笑、内涵段子，不间断更新",
          id: 15
        }, {
          name: "老黄历",
          info: "提供老黄历查询,黄历每日吉凶宜忌查询",
          id: 16
        }, {
          name: "节假日信息查询",
          info: "根据日期查询节假日安排等信息",
          id: 17
        }, {
          name: "二维码生成",
          info: "按照设定的参数、生成二维码",
          id: 18
        }, {
          name: "气象预警",
          info: "查询各气象台发布的灾害类型、级别、时间等预警信息",
          id: 19
        }, {
          name: "标准身高体重计算器",
          info: "基于BMI指数,通过身高体重性别计算人体胖瘦程度以及是否达到健康标准,以及身高预测",
          id: 20
        }, {
          name: "成语接龙",
          info: "支持输入整个成语，或只输入成语中的末尾一个字，返回符合接龙条件的成语。",
          id: 21
        }, {
          name: "标准电码查询",
          info: "提供的标准中文电码查询程序结果",
          id: 22
        }, {
          name: "驾照题库",
          info: "采用公安部最新驾校模拟考试题库；黑钻会员自动获取2021年最新题库；",
          id: 23
        }, {
          name: "QQ号码测吉凶",
          info: "QQ号码测吉凶,QQ号码吉凶查询,QQ号码吉凶预测,QQ号码吉凶",
          id: 24
        }, {
          name: "成语大全",
          info: "根据成语查询详细信息，如：详解、同义词、反义词、读音等信息；目前总计约收录4.5万组成语",
          id: 25
        }, {
          name: "新华字典",
          info: "最大最全的新华汉语词典，按拼音查、按部首查、按笔画查",
          id: 26
        }, {
          name: "生辰助手",
          info: "根据年月日时查询生辰八字等信息",
          id: 27
        }, {
          name: "NBA赛事",
          info: "NBA赛事赛程相关信息",
          id: 28
        }, {
          name: "足球联赛",
          info: "目前支持 英超，西甲，德甲，意甲，法甲，中超等赛事近期赛程及积分榜排名查询",
          id: 29
        }, {
          name: "简/繁/火星字体转换",
          info: "实现简体、繁体、火星文之间的转换",
          id: 30
        }, {
          name: "邮编查询",
          info: "提供全国邮政编码大全,为你快速准确查邮编",
          id: 31
        }, {
          name: "周公解梦",
          info: "周公解梦,周公解梦大全,周公解梦查询，免费周公解梦",
          id: 32
        }, {
          name: "图书电商数据",
          info: "于万千之中选择你所爱--好书推荐，值得你信赖。",
          id: 33
        }, {
          name: "黄金数据",
          info: "黄金品种、最新价、开盘价、最高价等信息",
          id: 34
        }, {
          name: "暂停基金",
          info: "暂停基金",
          id: 35
        }, {
          name: "货币汇率",
          info: "支持人民币牌价、外汇汇率查询；数据仅供参考，交易时以银行柜台成交价为准",
          id: 36
        }, {
          name: "历史天气查询",
          info: "查询历史天气，目前支持2000+城市、县、地区历史天气信息,主要指标包括每天最高气温、最低气温、天气状况、风向等",
          id: 37
        }, {
          name: "每日心灵鸡汤语录",
          info: "每日一条励志心灵鸡汤语录API，每日一句正能量，免费请求接口",
          id: 38
        }, {
          name: "二十四节气",
          info: "二十四节气查询，根据年份、节气名称查询相关信息",
          id: 39
        }, {
          name: "生日书",
          info: "根据出生日期查询生日书",
          id: 40
        }, {
          name: "生日花语",
          info: "根据出生日期查询生日花语",
          id: 41
        }, {
          name: "生日密码",
          info: "根据出生日期查询生日密码",
          id: 42
        }, {
          name: "生肖查询",
          info: "根据日期或生肖名称,查询生肖详细信息",
          id: 43
        }, {
          name: "星座查询",
          info: "根据日期或星座名称,查询星座详细信息",
          id: 44
        }, {
          name: "汉字转五笔",
          info: "输入汉字查询五笔",
          id: 45
        }, {
          name: "贷款公积金计算器",
          info: "公积金贷款计算器用于计算用户在申请公积金贷款时，选择等额本金和等额本息两种不同的还款方式后，每一期需偿还公积金贷款的月供，以及利息总额和还款总额。",
          id: 47
        }, {
          name: "最佳身材计算器",
          info: "女性最佳身材计算器,如:最佳上臂围、最佳胸围、最佳臀围等",
          id: 48
        }, {
          name: "随机密码生成器",
          info: "生成字母数字特殊符号不同长度的密码组合",
          id: 49
        }, {
          name: "基础健康指数计算器",
          info: "通过身高、体重、年龄计算基础代谢率（BMR）",
          id: 50
        }, {
          name: "世界时区时间",
          info: "世界时区列表及详情",
          id: 51
        }, {
          name: "星座配对",
          info: "查看你跟哪个星座最配!",
          id: 52
        }, {
          name: "汽车OBD故障码查询",
          info: "汽车OBD故障码查询，返回中文含义、英文含义、故障范围、描述等",
          id: 53
        }, {
          name: "中文同义词/反义词查询",
          info: "中文同义词、反义词查询",
          id: 54
        }, {
          name: "今日国内油价查询",
          info: "今日汽油价格查询",
          id: 55
        }, {
          name: "生肖配对",
          info: "生肖配对查询",
          id: 56
        }, {
          name: "车辆品牌车型大全",
          info: "车辆品牌大全、车系、车型基本信息查询",
          id: 57
        }, {
          name: "全国行政区划查询",
          info: "全国行政区查询,支持省、市、区县、乡镇。最大4级",
          id: 58
        }
      ]
    };
  }
};
</script>
<style lang="less" scoped>
.fd-main-box {
  width: 100%;
  height: 100%;
  padding-top: 200px;
  position: relative;

  .fd-title-box {
    width: 100%;
    height: 200px;
    position: absolute;
    top: 0;
    left: 0;
    background: #27ae61;

    .fd-title-logo {
      width: 24px;
      height: 24px;
      position: absolute;
      left: 40px;
      top: 20px;
      background: url("@{imgUrl}/common/API.png") center no-repeat;
      background-size: 100%;
    }

    .fd-title-text {
      color: #fff;
      font-size: 28px;
      font-weight: bold;
      text-align: center;
      margin-top: 70px;
    }

    .fd-info-text {
      color: #fff;
      font-size: 14px;
      text-align: center;
      margin-top: 20px;
    }
  }
}

.fd-middle-content {
  width: 1440px;
  margin: 0 auto;
  padding: 20px 0;
}

.fd-api-list {
  width: 100%;
  display: flex;
  flex-direction: row;

  .fd-api-item {
    position: relative;
    width: 20%;
    flex: 0 0 1;
    padding: 10px;
    height: 256px;
    border: 1px solid #eee;
    border-radius: 8px;
    margin: 0 15px 15px 0;

    &:nth-child(5n+5) {
      margin-right: 0;
    }

    .fd-api-box {
      padding-top: 40px;
    }

    &:hover {
      box-shadow: 0px 10px 10px -5px #eee;

      .fd-api-box {
        transform: translateY(-30px);
        transition: .5s;
      }

      .fd-api-price {
        display: none;
      }

      .fd-api-info {
        opacity: 1;
      }

      .fd-api-btn {
        opacity: 1;
      }
    }

    .fd-icon-box {
      display: inline-block;
      text-align: center;

      .fd-api-icon {
        display: inline-block;
        width: 90px;
        height: 90px;

        .loop(@n, @i: 0) when(@i<@n) {
          .loop(@n, (@i+1));

          &.api@{i} {
            background: url("@{imgUrl}/api/@{i}.png") center no-repeat;
            background-size: 100%;
          }
        }

        .loop(2)
      }

      h2 {
        color: #666;
        font-size: 14px;
        text-align: center;
        margin: 0;
        margin-bottom: 8px;
        padding: 0 20px;
      }
    }

    .fd-api-price {
      color: #27ae61;
      font-size: 16px;
      font-weight: bold;
      text-align: center;
      margin: 0;
    }

    .fd-api-info {
      width: 185px;
      margin: 0 auto;
      overflow: hidden;
      display: -webkit-box;
      -webkit-box-orient: vertical;
      -webkit-line-clamp: 4;
      text-overflow: ellipsis;
      color: #9f9f9f;
      font-size: 12px;
      text-align: center;
      opacity: 0;
      word-break: break-all;
    }

    .fd-api-btn {
      opacity: 0;
      position: absolute;
      bottom: 17px;
      left: 50%;
      margin-left: -96px;
      width: 192px;
      height: 32px;
      text-align: center;
      line-height: 32px;
      color: white;
      font-size: 14px;
      font-weight: bold;
      background-color: #27ae61;
      border-radius: 4px;
      text-decoration: none;
      padding: 0;
      transition: .5s;
      cursor: pointer;
    }
  }
}

table td {
  width: 200px;
  height: 200px;
}
</style>
